<template>
    <view class="globe_back">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <view slot="top">
                <view class="box">
                    <view class="flex tipbox">
                        <view :class="tipIndex == item.id ? 'tipActive' : 'tip'" @click="tip(item.id)" v-for="item in tiptext">{{ item.name }}</view>
                    </view>
                    <view class="flex">
                        <view :class="tabIndex == item.id ? 'tabActive' : 'tab'" @click="navtab(item.id)" v-for="item in tab">{{ item.name }}</view>
                    </view>
                </view>
            </view>
            <view class="box">
                <!-- 列表 -->
                <view>
                    <view class="list" v-for="item in list">
                        <view class="flex">
                            <view class="shopImg">
                                <image style="width: 100%" :src="item.img" mode="widthFix"></image>
                            </view>
                            <view>
                                <view class="fw_bold f_28">{{ item.title }}</view>
                                <view>
                                    <text class="cl_999CA3 mr_24 f_28">销量{{ item.sales }}</text>
                                    <text class="cl_999CA3 mr_24 f_28">库存{{ item.inventory }}</text>
                                </view>
                                <view class="flex justify_content_end cl_FF6401 f_32 fw_bold">￥{{ item.money }}</view>
                            </view>
                        </view>
                        <view class="flex justify_content_end">
                            <view class="flex btn">
                                <u-icon name="trash" size="20"></u-icon>
                                <view>删除</view>
                            </view>
                            <view class="flex btn">
                                <u-icon name="download" size="20"></u-icon>
                                <view>下架</view>
                            </view>
                            <view class="flex btn back_3377FF cl_fff">
                                <u-icon name="edit-pen" size="20" color="#ffffff"></u-icon>
                                <view>编辑</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view style="height: 100px"></view>
                <view v-if="tipIndex == 1" class="addBtn back_3377FF br_24 cl_fff mt_24" @click="add(0)">添加商品</view>
                <view v-if="tipIndex == 2" class="addBtn back_3377FF br_24 cl_fff mt_24" @click="add_zc">添加商品</view>
                <view v-if="tipIndex == 3" class="addBtn back_3377FF br_24 cl_fff mt_24" @click="add(1)">添加商品</view>
            </view>
        </z-paging>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tipIndex: 1,
            tabIndex: 1,
            tiptext: [
                { name: '商城', id: 1 },
                { name: '租车', id: 2 },
                { name: '电池', id: 3 }
            ],
            tab: [
                {
                    name: '在售中',
                    id: 1
                },
                {
                    name: '已下架',
                    id: 2
                }
            ],
            list: []
        };
    },
    methods: {
        tip(e) {
            this.tipIndex = e;
        },
        navtab(e) {
            this.tabIndex = e;
        },
        add(type) {
            uni.navigateTo({
                url: '/pages/business/addProduct?type=' + type
            });
        },
        add_zc() {
            uni.navigateTo({
                url: '/pages/business/CarRental'
            });
        },
        // pageNo 页数 pageSize 单页显示数量
        queryList(pageNo, pageSize) {
            //模拟数据
            let list = [
                {
                    img: '@/static/imgs/img.png',
                    title: '哈啰电动车新国标电动自行车锂电成人男女学生智能A80电瓶车',
                    sales: '233',
                    inventory: '3323',
                    money: '1549.00'
                },
                {
                    img: '@/static/imgs/img.png',
                    title: '哈啰电动11111车新国标电动自行车锂电成人男女学生智能A80电瓶车',
                    sales: '2132',
                    inventory: '6567',
                    money: '1321.00'
                },
                {
                    img: '@/static/imgs/img.png',
                    title: '哈啰电动车新国标电动自行车锂电成人男女学生智能A80电瓶车',
                    sales: '233',
                    inventory: '3323',
                    money: '1549.00'
                },
                {
                    img: '@/static/imgs/img.png',
                    title: '哈啰电动11111车新国标电动自行车锂电成人男女学生智能A80电瓶车',
                    sales: '2132',
                    inventory: '6567',
                    money: '1321.00'
                },
                {
                    img: '@/static/imgs/img.png',
                    title: '哈啰电动车新国标电动自行车锂电成人男女学生智能A80电瓶车',
                    sales: '233',
                    inventory: '3323',
                    money: '1549.00'
                },
                {
                    img: '@/static/imgs/img.png',
                    title: '哈啰电动11111车新国标电动自行车锂电成人男女学生智能A80电瓶车',
                    sales: '2132',
                    inventory: '6567',
                    money: '1321.00'
                }
            ];
            this.$refs.paging.complete(list);
            // 分页停止
            if (pageNo >= 5) {
                this.$refs.paging.complete(false);
            }
        },
        // 重新加载分页
        reload() {
            this.$refs.paging.reload();
        }
    }
};
</script>

<style scoped lang="scss">
.addBtn {
    width: 686rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 24px auto;
    position: fixed;
    bottom: 50rpx;
}
.box {
    padding: 0 32rpx;
    .list {
        background: white;
        border-radius: 24rpx;
        margin-top: 24rpx;
        padding: 24rpx;
    }
    .shopImg {
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
        margin-right: 24rpx;
    }
    .tipbox {
        background: #f7f7f7;
        border-radius: 8rpx;
        color: #666b75;
        font-size: 28rpx;
        padding: 8rpx;
    }
    .tip {
        padding: 16rpx;
        border-radius: 8rpx;
    }
    .tipActive {
        background: white;
        color: #00091a;
        padding: 16rpx;
        border-radius: 8rpx;
    }
    .tab {
        color: #999ca3;
        font-size: 28rpx;
        margin: 19rpx;
    }
    .tabActive {
        color: #3377ff;
        font-size: 32rpx;
        margin: 19rpx;
        font-weight: bold;
    }
    .btn {
        height: 68rpx;
        line-height: 68rpx;
        padding: 0 30rpx;
        text-align: center;
        border: 2rpx solid #ccced1;
        border-radius: 16rpx;
        margin: 0 12rpx;
        font-size: 28rpx;
    }
}
</style>
